<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta charset="utf-8">
        <title>jQuery仿win10桌面QQ聊天ui - 素材火</title>
        <link href="/css/style.css" rel="stylesheet" type="text/css">
        <script src="/js/jquery.js"></script>
        <script src="/js/index.js"></script>
        <script src="/js/superslide.2.1.js"></script>
        <script src="/js/nicescroll.js"></script>
        <script src="/js/public.js"></script>
    </head>

    <body>
        <div class="qq-exe"><img src="/images/QQ-ICON.png"><input type="text" value="腾讯QQ" placeholder="腾讯QQ"></div>

        <div class="win-bg"><img src="/images/win-bg.png"></div>

        <div class="qq-login">
            <div class="login-menu">
                <span></span><span></span><span class="login-close"></span>
            </div>
            <div class="login-ner">
                <div class="login-left">
                    <div class="login-head"><img src="/images/login/head.jpg"></div>
                </div>
                <div class="login-on">
                    <div class="login-txt">
                    <input id="username" type="text" placeholder="QQ号码/手机/邮箱">
                    <input id="password" type="password" placeholder="密码"></div>
                    <div class="login-xuan"><span class="fl"><input type="checkbox"><i>记住密码</i></span><span class="fr"><input type="checkbox"><i>自动登录</i></span></div>
                    <div class="login-but">安全登录</div>
                </div>
                <div class="login-right">
                    <a href="javascript:void(0)" id="regUser">注册账号</a>
                    <a href="https://aq.qq.com/cn2/findpsw/pc/pc_find_pwd_input_account?pw_type=0&aquin=" target="_blank">找回密码</a>
                </div>
            </div>
        </div>

        <div class="qq">
            <div class="qq-top">
                <div class="qq-top-icon">
                    <i><img src="/images/qq-top.png"></i>
                    <span class="qq-top-02 close"><img src="/images/qq-top-02.png"></span>
                    <span class="qq-top-01 min"><img src="/images/qq-top-01.png"></span>
                </div>
                <div class="qq-top-name">
                    <span id="alias_span">素材火</span>
                    <dl><dd><img src="/images/zai.png"></dd><dt><img src="/images/lv.png"></dt><dt><img src="/images/svip.png"></dt></dl>
                </div>
                <div class="qq-top-shuo">
                	<input id="user_mark" type="text" value="这两天空间被各种婚礼刷屏了"></div>
                <div class="qq-top-menu">
                    <ul>
                        <li></li><li></li><li></li><li></li>
                    </ul>
                    <span class="qq-top-001"></span>
                    <span class="qq-top-002"></span>
                </div>
                <div class="qq-serch">搜索：联系人、讨论组、群、企业</div>
            </div>
            <div class="qq-xuan">
                <ul>
                    <li class="qq-xuan-li"><span></span><i></i></li>
                    <li><span></span><i></i></li>
                    <li><span></span><i></i></li>
                    <li><span></span><i></i></li>
                </ul>
            </div>
            <!-- start 在线用户列表 -->
            <div class="qq-hui">
                <ul id="qq_list">
                </ul>
            </div>
            <!-- end 在线用户列表 -->
            <div class="qq-bot">
                <div class="qq-menu">
                    <ul>
                        <li><img src="/images/bot-menu/01.png"></li>
                        <li><img src="/images/bot-menu/02.png"></li>
                        <li><img src="/images/bot-menu/03.png"></li>
                        <li><img src="/images/bot-menu/04.png"></li>
                        <li><img src="/images/bot-menu/05.png"></li>
                        <li><img src="/images/bot-menu/06.png"></li>
                        <li><img src="/images/bot-menu/07.png"></li>
                        <li><img src="/images/bot-menu/08.png"></li>
                        <li><img src="/images/bot-menu/09.png"></li>
                        <li><img src="/images/bot-menu/10.png"></li>
                    </ul>
                </div>
                <div class="qq-bou-she">
                    <ul>
                        <li><img src="/images/bot-menu/11.png"></li>
                        <li><img src="/images/bot-menu/12.png"></li>
                        <li><img src="/images/bot-menu/13.png"></li>
                        <li><img src="/images/bot-menu/14.png"></li>
                        <li><img src="/images/bot-menu/15.png"></li>
                        <li><img src="/images/bot-menu/16.png"><span>查找</span></li>
                        <li><img src="/images/bot-menu/05.png"><span>应用宝</span></li>
                    </ul>
                </div>
            </div>
        </div>
		<!-- start 聊天框 -->
        <div class="qq-chat">
            <div class="qq-chat-win">
                <ul>
                    <li class="she"></li><li class="min"></li><li class="max"></li><li class="msg_window close"></li>
                </ul>
            </div>
            <div class="qq-chat-top">
                <div class="qq-chat-tops">
                    <div class="qq-chat-t-head"><img src=""></div>
                    <div class="qq-chat-t-name"></div>
                    <div class="qq-chat-t-shuo">站在别人的雨季，淋湿自己空弹一出戏.....</div>
                </div>
                <div class="qq-chat-menu">
                    <ul>
                        <li><span><img src="/images/chat/icon-01.png"></span></li>
                        <li><span><img src="/images/chat/icon-02.png"></span></li>
                        <li><span><img src="/images/chat/icon-03.png"></span><i></i></li>
                        <li><span><img src="/images/chat/icon-04.png"></span><i></i></li>
                        <li><span><img src="/images/chat/icon-05.png"></span><i></i></li>
                        <li><span><img src="/images/chat/icon-06.png"></span></li>
                        <li><span><img src="/images/chat/icon-07.png"></span><i></i></li>
                    </ul>
                </div>
            </div>
            <div class="qq-chat-bot">
                <div class="qq-chat-txt">
                	<!-- 对话框 -->
                    <ul id="msg">
                        
                    </ul>
                </div>
                <div class="qq-chat-text">
                    <ul>
                        <li><span><img src="/images/chat/menu-01.png"></span></li>
                        <li><span><img src="/images/chat/menu-02.png"></span></li>
                        <li><span><img src="/images/chat/menu-03.png"></span></li>
                        <li><span><img src="/images/chat/menu-04.png"></span></li>
                        <li><span><img src="/images/chat/menu-05.png"></span><i></i></li>
                        <li><span><img src="/images/chat/menu-06.png"></span></li>
                        <li><span><img src="/images/chat/menu-07.png"></span><i></i></li>
                        <li><span><img src="/images/chat/menu-08.png"></span></li>
                        <li><span><img src="/images/chat/menu-09.png"></span><i></i></li>
                        <li class="fr" style="margin-right:5px;"><span><img src="/images/chat/menu-10.png"></span><p>消息记录</p><i></i></li>
                    </ul>
                    <textarea id="qq-chat-text"></textarea>
                    <div class="qq-chat-but">
                        <span class="fasong">发送(S)</span>
                        <span class="close-chat">关闭(C)</span>
                    </div>
                </div>
            </div>
        </div>
		<!-- end 聊天框 -->
    </body>
</html>
